<template>
  <div v-cloak>
    <!-- <Top title="水珠钱包">
      <span slot="icon">
        <i class="iconfont icon-wenhao" @click="goHelpcenter"></i>
      </span>
    </Top> -->
    <div class="mine">
      <div class="mine-banner">
        <div class="mine-banner-top">
          <img src="../../assets/beijing.png" />
        </div>
        <div class="mine-banner-headerpic">
          <img src="../../assets/user.png" v-if="hasLogin" @click="goSetpassword()" />
          <img src="../../assets/user-moren.png" v-else @click="goLogin" />
        </div>
        <p class="login-please" v-if="!hasLogin">HI,&nbsp;&nbsp;&nbsp;请登录~</p>
        <p class="edit" v-else>
          <span class="tel">{{tel}}</span>
          <i class="iconfont icon-bianji" @click="goEdit"></i>
        </p>
      </div>
      <div class="mine-list">
        <div class="mine-list-item" v-for="(item,index) in listData" :key="index" @click="goPage(item.url,index)">
          <div class="mine-list-item-icon">
            <i class="iconfont" :class="item.icon"></i>
          </div>
          <div class="mine-list-item-word">{{item.word}}</div>
          <div class="mine-list-item-extend">
            <i class="iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '../../components/Header'
import $cookie from 'vue-cookie'
import { Indicator } from 'mint-ui'
export default {
  name: 'mine',
  components: { Top },
  data() {
    return {
      listData: [{
        icon: 'icon-jieqian',
        word: '申请贷款',
        url: '/applyloan'
      },
      {
        icon: 'icon-shijian',
        word: '我的足迹',
        url: '/myfoot'
      },
      {
        icon: 'icon-fankui',
        word: '我要反馈',
        url: '/feedback'
      },
      {
        icon: 'icon-gantanhao',
        word: '关于我们',
        url: '/aboutus'
      },
      {
        icon: 'icon-bangzhuzhongxin',
        word: '帮助中心',
        url: '/helpcenter'
      },
      {
        icon: 'icon-suo1',
        word: '设置',
        url: '/setting'
      }],
      tel: '',
      token: '',
      hasLogin: false
    }
  },
  methods: {
    goPage(url, index) {
      // console.log(this.token);
      // console.log(index);
      // 申请贷款,我的祖籍，我要反馈，设置这四个页面，要进去必须先登录
      if ((!this.hasLogin && index == 0) || (!this.hasLogin && index == 1) || (!this.hasLogin && index == 2) || (!this.hasLogin && index == 5)) {
        this.$router.push({ path: '/login',query:{'history':2} });
      } else {
        this.$router.push({ path: url });
      }
    },
    goSetpassword() {
      Indicator.open('加载中...');
      this.$http.post("/loansupermarket-app/login/isSetPwd")
        .then((response) => {
          var resBody = response.body;
          // console.log(resBody)
          var that = this;
          setTimeout(function () {
            Indicator.close();
            if (resBody.code == '000') {
              if (resBody.result.isSetPwd) {
                that.$router.push({ path: '/modifypassword' })
              } else {
                that.$router.push({ path: '/setpassword' })
              }
            }else{
              MessageBox.alert(resBody.msg,'提示');
            }
          }, 500)

        })
    },
    // 进入帮助中心页面
    goHelpcenter() {
      this.$router.push({ path: '/helpcenter' })
    },
    // 完善个人信息
    goEdit() {
      this.$router.push({ path: '/improveinformation' })
    },
    goLogin() {
      this.$router.push({ path: '/login' })
    }
  },
  mounted() {
    this.token = $cookie.get('sso_cookie_id');
    this.tel = window.sessionStorage.getItem('tel');
    let borrowerId = window.sessionStorage.getItem('borrowerId');
    let postData = { borrowerId: borrowerId };
    // 判断登录没登录
    this.$http.post('/loansupermarket-app/personal/getCustomerBaseInfo.do', postData)
      .then((response) => {
        var resBody = response.body;
        // console.log(resBody)
        if (resBody.code == '444') {
          this.hasLogin = false;
        } else if (resBody.code == '000') {
          this.hasLogin = true;
        }
      });
    // console.log(this.tel)
  }
}
</script>
<style lang="scss">
@import '../../scss/variable/base.scss';
.mine {
  width: 100%;
  // margin-top: 1.2rem;
  margin-bottom: 2rem;
  &-banner {
    width: 100%;
    height: 5.4rem;
    background: #fff;
    position: relative;
    &-top {
      height: 3.05rem;
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-headerpic {
      width: 2.46rem;
      height: 2.46rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -60%);
      box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        margin-left: 0.02rem;
        margin-top: 0.02rem;
      }
    }
    .edit {
      margin-top: 1rem;
      .tel {
        font-size: 0.45rem;
      }
      .iconfont {
        font-size: 0.55rem;
        margin-left: 0.2rem;
        vertical-align: -5%;
        color: $primaryColor;
      }
    }
    .login-please {
      font-size: 0.4rem;
      margin-top: 1rem;
    }
  }
  &-list {
    margin-top: 0.4rem;

    width: 100%;
    &-item {
      border-radius: 8px;
      &:active {
        background: $activeColor;
      }
      &:nth-of-type(6) {
        .mine-list-item-icon {
          border-bottom: 1px solid $borderColor;
        }
      }
      line-height: 1.33rem;
      font-size: 0.38rem;
      font-family: "雅黑";
      height: 1.33rem;
      background: #fff;
      width: 100%;
      display: flex;
      &-icon {
        flex: 1.5;
        i {
          vertical-align: -8%;
          color: $primaryColor;
          font-size: 0.6rem;
        }
      }
      &-word {
        text-align: left;
        border-bottom: 1px solid $borderColor;
        flex: 9;
      }
      &-extend {
        overflow: hidden;
        border-bottom: 1px solid $borderColor;
        flex: 1.5
      }
    }
  }
}
</style>


